<template>
  <van-nav-bar
    :title="route.path === '/recommend' ? '种草推荐' : '我的文章'"
    left-arrow
    @click-left="router.back()"
    @click-right="router.push('/add-article')"
  >
    <template #right>
      <van-icon name="add-o" />
    </template>
  </van-nav-bar>
  <div class="list">
    <van-list
      v-model:loading="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多文章了"
      :offset="10"
    >
      <van-card
        class="item"
        v-for="article in list"
        :thumb="article.pic_url"
        @click="router.push(`/article-detail?articleId=${article.id}`)"
      >
        <template #title>
          <p class="title">
            {{ article.title }}
          </p>
        </template>
        <template #desc
          ><p class="detail">{{ article.detail }}</p></template
        >
        <template #price>
          <p class="desc">
            {{ article.desc }}
          </p>
        </template>
        <template #num>
          <p>{{ article.created_at }}</p>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script setup>
import { getComments } from "@/api/comment";
import { useRoute, useRouter } from "vue-router";
import usePageList from "@/hooks/usePageList";

let route = useRoute();
let router = useRouter();
let { onLoad, loading, finished, list } = usePageList(getComments, {
  page: 1,
  limit: 10,
});
</script>

<style scoped lang="scss">
.item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .title {
    font-size: 16px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .detail {
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(105, 105, 105);
  }
  .desc {
    color: rgb(105, 105, 105);
    font-weight: normal;
  }
}
</style>